<template>
  <div class="AppContainer">
    <div class="boxContainer">
      <div v-for="(item, index) in list1" :key="index" :class="item.index === index1? 'boxStyle boxStyle1': 'boxStyle'" @click="changeNav(item.index)">{{ item.name }}</div>
    </div>
    <div class="left">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"></el-tree>
    </div>
    <input type="text" name="" id="addEvent" placeholder="输入任务" v-model="title" @keyup.enter="AppaddConent">&nbsp;
    <button class="addEventBtn" @click="AppaddConent">添加事项</button>
    <div class="content" v-if="showAllStyle">
      <ul>
        <li v-for="item in conents" :key="item[0]"><input type="checkbox" name="" id="" :checked="item[2]" @click="Appstate(item[0])"><span>{{ item[1] }}</span> <a href="javascript:;" class="remove" @click="reMove(item[0])">删除</a></li>
      </ul>
      <div class="state">
        <span class="contentNum">{{ num }}条剩余</span>
        <div class="nav">
          <span class="all spanstyle" @click="showAll">全部</span>
          <span class="undone" @click="showUndone">未完成</span>
          <span class="completed" @click="showCompleted">已完成</span>
        </div>
        <a href="javascript:;" class="clearContent" @click="renoveAll">清除已完成</a>
      </div>
    </div>
    <!-- 点击未完成，显示未完成的事件 -->
    <div class="content" v-if="showUndoneStyle">
      <ul>
        <li v-for="item in undone" :key="item[0]"><input type="checkbox" name="" id="" :checked="item[2]" @click="Appstate(item[0])"><span>{{ item[1] }}</span> <a href="javascript:;" class="remove" @click="reMove(item[0])">删除</a></li>
      </ul>
      <div class="state">
        <span class="contentNum">{{ num }}条剩余</span>
        <div class="nav">
          <span class="all" @click="showAll">全部</span>
          <span class="undone  spanstyle" @click="showUndone">未完成</span>
          <span class="completed" @click="showCompleted">已完成</span>
        </div>
        <a href="javascript:;" class="clearContent" @click="renoveAll">清除已完成</a>
      </div>
    </div>
    <!-- 点击已完成，显示已完成的事件 -->
    <div class="content" v-if="showCompletedStyle">
      <ul>
        <li v-for="item in completed" :key="item[0]"><input type="checkbox" name="" id="" :checked="item[2]" @click="Appstate(item[0])"><span>{{ item[1] }}</span> <a href="javascript:;" class="remove" @click="reMove(item[0])">删除</a></li>
      </ul>
      <div class="state">
        <span class="contentNum">{{ num }}条剩余</span>
        <div class="nav">
          <span class="all" @click="showAll">全部</span>
          <span class="undone" @click="showUndone">未完成</span>
          <span class="completed spanstyle" @click="showCompleted">已完成</span>
        </div>
        <a href="javascript:;" class="clearContent" @click="renoveAll">清除已完成</a>
      </div>
    </div>
    <el-table
    v-loading="loading"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  <div>
    <el-button @click="show3 = !show3">Click Me</el-button>

    <div style="margin-top: 20px; height: 200px;">
      <el-collapse-transition>
        <div v-show="show3">
          <div class="transition-box">el-collapse-transition</div>
          <div class="transition-box">el-collapse-transition</div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
  <i class="el-icon-s-custom"></i>
  <el-row class="block-col-2">
  <el-col :span="12">
    <span class="demonstration">hover 激活</span>
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
  <el-col :span="12">
    <span class="demonstration">click 激活</span>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-col>
</el-row>
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
<el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
  <div class="demo-image__error">
  <div class="block">
    <span class="demonstration">默认</span>
    <el-image></el-image>
  </div>
  <div class="block">
    <span class="demonstration">自定义</span>
    <el-image>
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
  </div>
</div>

  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      list1: [
        {
          name: '网页',
          index: 1
        },
        {
          name: '网页',
          index: 2
        },
        {
          name: '网页',
          index: 3
        },
        {
          name: '网页',
          index: 4
        },
        {
          name: '网页',
          index: 5
        },
        {
          name: '网页',
          index: 6
        }
      ],
      index1: 1,
      title: '',
      id: 0,
      conent: [],
      // 是否显示所有事件
      showAllStyle: true,
      showUndoneStyle: false,
      showCompletedStyle: false,
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      loading: true,
      show3: true,
      percentage: 0,
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1',
            children: [{
              id: 1,
              label: '四级 1-1-1-1',
              children: [{
                label: '五级 1-1-1-1-1',
                children: [
                  {
                    id: 2,
                    label: '六级 1-1-1-1-1-1'
                  },
                  {
                    id: 3,
                    label: '六级 1-1-1-1-1-2'
                  },
                  {
                    id: 4,
                    label: '六级 1-1-1-1-1-3'
                  },
                  {
                    id: 5,
                    label: '六级 1-1-1-1-1-4'
                  }
                ]
              }]
            }]
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    ...mapState(['conents', 'num', 'completed', 'undone'])
    // ...mapGetters(['showCompleted'])
  },
  methods: {
    ...mapMutations(['addConent', 'targetConent', 'removeConent', 'removeCountAll', 'completedList', 'undoneList']),
    ...mapActions(['removeConentAsync']),
    // 点击已完成，显示已完成的特性标签
    showCompleted () {
      this.showCompletedStyle = true
      this.showUndoneStyle = false
      this.showAllStyle = false
      this.completedList()
    },
    // 点击未完成，显示未完成的数量
    showUndone () {
      this.showCompletedStyle = false
      this.showUndoneStyle = true
      this.showAllStyle = false
      this.undoneList()
    },
    // 点击所有，显示所有数量
    showAll () {
      this.showCompletedStyle = false
      this.showUndoneStyle = false
      this.showAllStyle = true
    },
    // eslint-disable-next-line vue/no-dupe-keys
    // 点击添加，增加数量
    AppaddConent () {
      if (this.title.length !== 0) {
        this.id++
        this.conent = [this.id, this.title, false]
        this.addConent(this.conent)
        this.title = ''
      }
    },
    // 点击复选框 ，当前复选框的状态为 true
    Appstate (id) {
      // console.log(id)
      this.targetConent(id)
    },
    // 点击删除， 删除当前的事件
    reMove (id) {
      console.log(id)
      this.removeConent(id)
    },
    // 点击删除已完成
    renoveAll () {
      this.removeConentAsync()
    },
    handleNodeClick (data, index) {
      console.log(data, index)
    },
    changeNav (index) {
      console.log(index)
      this.index1 = index
    }
  },
  created () {
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

<style lang="less" scoped>
  .AppContainer{
    .boxContainer{
      height: 60px;
      display: flex;
      width: 600px;
      line-height: 60px;
      margin-bottom: 20px;
    }
    .boxStyle{
      flex: 1;
      background-color: #aaa;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    .boxStyle1 {
      background-color: #0B8AFF;
      color: white;
    }
    /deep/.el-tree-node__content{
      height: 50px;
      position: relative;
      color: #000;
      font-size: 24px;
      font-weight: 600;
      // text-indent: 2em;
    }
    /deep/.el-tree-node__content:hover, .el-upload-list__item:hover{
      // background-color: red;
      background-color: #409EFF;
      color: white;
    }
    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
      background-color: #409EFF;
      color: white;
      position: relative;
    }
    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content::after{
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 100%;
      background-color: red;
    }
    /deep/.el-tree-node__expand-icon{
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      transition: 0.3s;
    }
    /deep/.el-tree-node__expand-icon.expanded{
      transform: rotateZ(90deg);
    }
    .left{
      position: fixed;
      left: 0;
      top: 0;
      // transform: translateY(-50%);
      width: 300px;
      height: 300px;
      // background-color: red;
    }
    width: 500px;
    // height: 200px;
    // border: 1px solid red;
    margin: 100px auto;
    // padding-bottom: 200px;
    #addEvent{
      height: 25px;
      border: 1px solid #ccc;
      width: 360px;
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .addEventBtn{
      height: 30px;
      width: 100px;
      color: white;
      background-color: #0B8AFF;
      border: 0;
      border-radius: 5px;
    }
    .content{
      border: 1px solid #ccc;
      width: 370px;
      > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        // border: 1px solid #ccc;
        > li{
          position: relative;
          height: 35px;
          line-height: 35px;
          padding-left: 10px;
          border-bottom: 1px solid #ccc;
          .remove{
            position: absolute;
            font-size: 14px;
            text-decoration: none;
            right: 10px;
          }
          > span{
            display: inline-block;
            margin-left: 10px;
            // background-color: red;
            width: 280px;
            white-space: nowrap;
            text-overflow: ellipsis;
            // overflow: hidden;
          }
        }
      }
      .state{
        display: flex;
        height: 40px;
        align-items: center;
        justify-content: space-between;
        .nav{
          // margin: 20px;
          flex: 1;
          display: flex;
          height: 30px;
          align-items: center;
          line-height: 30px;
          // background-color: red;
          > span{
            flex: 1;
            height: 100%;
            text-align: center;
            border: 1px solid #ccc;
            margin-left: -1px;
            font-size: 14px;
            color: #777;
          }
          .spanstyle{
            background-color: #0B8AFF;
            color: white;
          }
        }
        .contentNum{
          color: #555;
          font-size: 12px;
          width: 100px;
          text-align: center;
        }
        .clearContent{
          font-size: 12px;
          text-decoration: none;
          width: 100px;
          text-align: center;
        }
      }
    }
    .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  /deep/.el-progress-bar__outer{
    height: 20px!important;
  }
  }
</style>
